<template>
    <div class="login">
        <!-- 返回按钮 -->
        <div class="callback" @click="$router.back()">
            <img src="../assets/images/callback.png" alt="">
        </div>
        <div class="login-png">
            <img src="../assets/images/dengluchatu.png" alt="">
        </div>
        <div class="login-content">
            <div class="denglu">লগইন করুন</div>
            <div class="login-jiantou">
                <div class="miao" v-if="isyzm">{{ num }}S</div>
                <div class="send" v-else @click="getyzm">পাঠান</div>
            </div>

            <van-form class="form" @submit="doSubmit">
                <van-field type="digit" class="phone" v-model="formData.phone" name="phone" placeholder="ফোন নম্বর লিখুন" />
                <van-field type="digit" class="code" v-model="formData.code" name="code" placeholder="যাচাইকরণ কোড লিখুন" />
                <button class="btn">প্রবেশ করুন</button>
            </van-form>
        </div>
    </div>
</template>
<script>
import { getLoginApi, getyzmApi } from "../api";
import { jiami, jiemi } from "../utils/AESKey.js";
import { Toast } from "vant";
export default {
    data() {
        return {
            formData: {
                phone: '',
                phoneCode: '+880',
                code: ''
            },
            isyzm: false,
            num: 0
        }
    },
    methods: {
        //登录
        async doSubmit() {
            // 登录成功
            const res = await getLoginApi(jiami(this.formData))
            try {
                //登陆成功
                if (!jiemi(res.data).status) {
                    this.$store.commit('changeLogin')
                    //存入用户数据
                    console.log(jiemi(res.data).user, 'user')
                    const paylode = jiemi(res.data).user
                    this.$store.dispatch('user/getUserInfo', paylode)
                    this.$router.push('/shouye')
                    Toast('সফল লগইন')
                    console.log('登录接口处理完毕')
                }
            } catch (error) {

            }

        },
        //获取验证码
        async getyzm() {
            const form = {
                model: {
                    phone: '',
                    phoneCode: '+880'
                }
            }
            form.model.phone = this.formData.phone

            if (this.formData.phone) {
                try {
                    const res = await getyzmApi(jiami(form))
                    if (jiemi(res.data).status === 0) {
                        console.log(jiemi(res.data))
                        this.djs()
                        //发送成功
                        Toast('সফলভাবে প্রেরিত')
                    }
                } catch (error) {

                }
            } else {
                Toast('ফোন নম্বর বা এড়িয়া কোড খালি')
            }
        },
        //倒计时
        djs() {
            this.isyzm = true
            this.num = 60
            let timer = setInterval(() => {
                this.num--
                if (this.num < 0) {
                    this.isyzm = false
                    clearInterval(timer)
                }
            }, 1000)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-field__control::-webkit-input-placeholder {
    color: #aaadb9;
    font-size: (15/@a);
}

.login {
    position: relative;
    width: 100vw;
    height: (667/@a);
    background-color: #405ab8;

    .callback {
        position: absolute;
        top: (20/@a);
        left: (20/@a);
        width: (25/@a);
        height: (25/@a);

        img {
            width: 100%;
        }
    }

    .login-png {
        width: (207/@a);
        height: (183/@a);

        img {
            margin-left: (84/@a);
            margin-top: (30/@a);
            width: 100%;
        }
    }

    .login-content {
        position: absolute;
        margin-left: (34/@a);
        z-index: 99;
        width: (307/@a);
        height: (314/@a);
        background-color: #fff;
        border-radius: (16/@a);

        .djs {
            position: absolute;
            right: (20/@a);
            bottom: (80/@a);
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #415AB8;
        }

        .denglu {
            margin-top: (31/@a);
            margin-left: (109/@a);
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: black;
            line-height: 20px;
        }

        .login-jiantou {
            z-index: 99999;
            position: absolute;
            right: (50/@a);
            top: (140/@a);
            width: (18/@a);
            height: (11/@a);

            .send {
                font-size: (16/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #415AB8;
                text-decoration: underline;
            }

            .miao {
                font-size: (16/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #c0c0c0;
            }
        }

        .form {
            margin-left: (18/@a);

            .phone {
                width: (271/@a) !important;
                // height: (55/@a);
                background: #F3F3F3;
                border-radius: (10/@a);
                margin-top: (26/@a);
                margin-bottom: (10/@a);
            }

            .code {
                width: (271/@a);
                // height: (55/@a);
                background: #F3F3F3;
                border-radius: (10/@a);
            }

            .btn {
                width: (271/@a);
                height: (49/@a);
                border-radius: (10/@a);
                background-color: #415ab8;
                margin-top: (50/@a);
                text-align: center;
                line-height: (49/@a);
                font-size: (15/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #FFFFFF;
            }
        }
    }
}
</style>